<template>
  <div class="container">
    <div class="app-container">
      <div class="main">

        <el-button type="primary" style="background: #e15536;width: 100px;border:0px;margin-bottom: 20px" @click="dialogVisible = true">新增模板</el-button>

        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column align="center" prop="templateType" label="模板类型" />
          <el-table-column align="center" prop="transportType" label="运送类型" />
          <el-table-column align="center" prop="associatedCityList" label="关联城市" />
          <el-table-column align="center" prop="firstWeight" label="首重" />
          <el-table-column align="center" prop="continuousWeight" label="续重" />
          <el-table-column align="center" prop="lightThrowingCoefficient" label="轻抛系数" />
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <el-button size="mini" type="text" style="margin-right:15px" @click="editData(row)">编辑</el-button>|
              <el-button size="mini" type="text" style="color:red" @click="open(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增模板框 -->
    <el-dialog title="新增模板" :visible.sync="dialogVisible" width="40%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">

        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="ruleForm.templateType" placeholder="请选择模板类型" style="width:90%">
            <el-option v-for="item in templateType" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="ruleForm.transportType" placeholder="请选择运送类型" style="width:90%">
            <el-option v-for="item in transportType" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="关联城市" prop="associatedCityList">
          <el-radio-group v-model="ruleForm.associatedCityList">
            <el-radio v-for="item in associatedCityList" :key="item.id" :label="item.value" :value="item.id" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="ruleForm.firstWeight" placeholder="请输入首重价格" style="width:90%" />
        </el-form-item>

        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="ruleForm.continuousWeight" placeholder="请输入续重价格" style="width:90%" />
        </el-form-item>

        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="ruleForm.lightThrowingCoefficient" placeholder="请输入轻抛系数" style="width:90%" />
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="center">
            <el-button class="btn" type="primary" @click="submitBtn">确认</el-button>
            <el-button style="width: 90px;" @click="dialogVisible = false">取消</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { addCarriageAPI, delCarriageAPI, getCarriageAPI } from '@/api/basic'
export default {
  name: 'Freight',
  data() {
    return {
      tableData: [],
      expressage: '',
      templateType: [
        { id: 1, value: '同省寄' },
        { id: 2, value: '省内寄' },
        { id: 3, value: '经济区互寄' },
        { id: 4, value: '跨省' }
      ],
      transportType: [
        { id: 1, value: '普快' },
        { id: 2, value: '特快' }
      ],
      associatedCityList: [
        { id: 1, value: '全国' },
        { id: 2, value: '京津冀' },
        { id: 3, value: '江浙沪' },
        { id: 4, value: '川渝' },
        { id: 5, value: '黑吉辽' }
      ],
      dialogVisible: false,
      ruleForm: {
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: '',
        associatedCityList: [1],
        transportType: '',
        templateType: ''
      },
      rules: {
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^\d+(.\d{1,2})?$/.test(value)) {
              callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^\d+(.\d{1,2})?$/.test(value)) {
              callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^[1-9]\d*$/.test(value)) {
              callback(new Error('只能输入正整数，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '关联城市不能为', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    dialogVisible(newValue) {
      if (!newValue) {
        this.$refs.ruleForm.resetFields()
        this.ruleForm = {
          firstWeight: '',
          continuousWeight: '',
          lightThrowingCoefficient: '',
          associatedCityList: [1],
          transportType: '',
          templateType: ''
        }
      }
    }
  },
  async created() {
    await this.getCarriageList()
  },
  methods: {
    async getCarriageList() {
      // 获取模板列表
      const res = await getCarriageAPI()
      this.tableData = res.data.data

      this.tableData.forEach(value => {
      // 循环遍历数组  把相应的数字换成文字
        this.templateType.forEach(item => {
          if (value.templateType === item.id) {
            value.templateType = item.value
          }
        })

        this.transportType.forEach(item => {
          if (value.transportType === item.id) {
            value.transportType = item.value
          }
        })

        this.associatedCityList.forEach(item => {
          if (+value.associatedCityList[0] === item.id) {
            value.associatedCityList = item.value
          }
        })
      })
    },
    async submitBtn() {
      // 对表单进行校验
      this.$refs.ruleForm.validate()
      console.log(this.ruleForm)
      const res = await addCarriageAPI({
        firstWeight: +this.ruleForm.firstWeight,
        continuousWeight: +this.ruleForm.continuousWeight,
        lightThrowingCoefficient: +this.ruleForm.lightThrowingCoefficient,
        associatedCityList: [this.ruleForm.associatedCityList],
        transportType: +this.ruleForm.transportType,
        templateType: +this.ruleForm.templateType
      })

      console.log(res)
      if (res.data.code === 1) {
        this.$message.error(res.data.msg)
        return
      }
      this.getCarriageList()
      this.$message.success('新增成功')
      this.dialogVisible = false
    },
    open(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delCarriageAPI(id)
        console.log(res)
        this.getCarriageList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editData(data) {
      console.log(data)
      this.ruleForm.firstWeight = data.firstWeight
      this.ruleForm.continuousWeight = data.continuousWeight
      this.ruleForm.lightThrowingCoefficient = data.lightThrowingCoefficient
      this.ruleForm.associatedCityList = data.associatedCityList
      this.ruleForm.transportType = data.transportType
      this.ruleForm.templateType = data.templateType
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  background-color: #fff;
  padding: 28px;

}
.btn{
    background-color: #e15536;
    color: #fff;
    width: 90px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid #e15536;
}
</style>
